<template>
  <view class="work-container">
    <!-- 轮播图 -->
    <uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
      <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
        <swiper-item v-for="(item, index) in data" :key="index">
          <view class="swiper-item" @click="clickBannerItem(item)">
            <image :src="item.image" mode="aspectFill" :draggable="false" />
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>
	<view class="notice">
		<uni-notice-bar scrollable show-get-more show-icon text="公告通知" color="#E99D42" background-color="rgba(244, 206, 152, 0.3)" @getmore="getMore" />
	</view>
	<view class="service">
		<view class="serviceHome">
			<view>
				<h3>国内客服</h3>
				<p>添加国内客服微信</p>
			</view>
			<view class="iconfont icon" style="color: #93D2F3;font-size:40px;">&#xe625;</view>
		</view>
		<view class="serviceInter">
			<view>
				<h3>国际客服</h3>
				<p>添加国际客服微信</p>
			</view>
			<view class="iconfont icon" style="color: #E99D42;font-size: 40px;">&#xe625;</view>
		</view>
	</view>
	<view class="search" @click="search">
		<view class="iconfont icon" style="color: black;font-size: 50px;">&#xe638;</view>
		<view>
			<h1>物品查询</h1>
			<p>禁运/敏货&nbsp;物品查询</p>
		</view>
	</view>
	<view class="guide">
		<h4>新手指南
		<span style="display: flex;align-items: center;">查看详情
		<view class="iconfont icon" style="color: black;font-size:14px;">&#xe60d;</view>
		</span>
		</h4>
		<view class="box">
			<p style="background-color:gainsboro;">包裹登记</p>
			<view class="iconfont icon" style="color: black;">&#xe60d;</view>
			<p style="background-color:#BEBEBE;">等待包裹</p>
			<view class="iconfont icon" style="color: black;">&#xe60d;</view>
			<p style="background-color:#9A9A9A;">支付邮费</p>
			<view class="iconfont icon" style="color: black;">&#xe60d;</view>
			<p style="background-color:dimgrey;">签收完成</p>
		</view>
		<view>
			<h5>
			常见问题
			<span style="display: flex;align-items: center;">查看详情
			<view class="iconfont icon" style="color: black;font-size:14px;">&#xe60d;</view>
			</span>
			</h5>
		</view>
	</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        current: 0,
        swiperDotIndex: 0,
        data: [{
            image: '/static/images/banner/1.jpg'
          },
          {
            image: '/static/images/banner/2.jpg'
          }
        ]
      }
    },
    methods: {
      clickBannerItem(item) {
        console.info(item)
      },
      changeSwiper(e) {
        this.current = e.detail.current
      },
	  search(){
		  uni.navigateTo({
		  	url:'/pages/index/search'
		  })
	  },
	  getMore() {
		  uni.navigateTo({
		  	url:'/pages/index/notice'
		  })
	  	}
    }
  }
</script>

<style lang="scss">
  .swiper {
    height: 300rpx;
  }
  .swiper-box {
	width: 95%;
    height: 150px;
	margin: auto;
  }
  .swiper-item {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    height: 300rpx;
    line-height: 300rpx;
  }

  @media screen and (min-width: 500px) {
    .uni-swiper-dot-box {
      width:95%;
      /* #ifndef APP-NVUE */
      margin: 0 auto;
      /* #endif */
      margin-top: 8px;
    }

    .image {
      width: 100%;
    }
  }
  .notice{
	width:95%;
	margin: auto; 
	margin-top:20rpx;
	border-radius:5px;
	box-shadow: 3px 3px 3px gray;
  }
  .service{
	  width: 95%;
	  height: 100px;
	  margin:auto ;
	  margin-top: 10px;
	  display: flex;
	  justify-content: space-between;
  }
  .serviceHome{
	  background:rgba(147, 210, 243, 0.3);
	  width: 47%;
	  border-radius: 10px;
	  box-shadow: 3px 3px 3px gray;
	  display: flex;
	  align-items: center;
	  justify-content: space-around;
  }
  .serviceHome h3{
	  font-size:18px;
	  font-weight: bolder;
	  color:#93D2F3;
	  margin-left: 5px;  
  }
  .serviceHome p{
	  font-size: 11px;
	  font-weight: bolder;
	  color:#93D2F3;
	  margin-top: 5px;
	  margin-left: 2px;
  }
  .serviceInter{
	  background:rgba(244, 206, 152, 0.5);
	  width: 47%;
	  border-radius: 10px;
	  box-shadow: 3px 3px 3px gray;
	  display: flex;
	  align-items: center;
	  justify-content: space-around;
  }
  .serviceInter h3{
  	  font-size:18px;
  	  font-weight: bolder;
  	  color:#E99D42;
	  margin-left: 5px;
  }
  .serviceInter p{
  	  font-size: 11px;
  	  font-weight: bolder;
  	  color:#E99D42;
	  margin-top: 5px;
  	  margin-left: 2px;
  }
  .search{
	  width: 95%;
	  height: 80px;
	  margin: auto;
	  border-radius: 10px;
	  margin-top: 10px;
	  background-color: lightgray;
	  display: flex;
	  align-items: center;
	  padding-left:15%;
  }
  .search h1{
	  font-size: 24px;
	  font-weight: bolder;
	  margin-left: 25px;
  }
  .search p{
	  font-size: 15px;
	  margin-left: 15px;
	  margin-top: 5px;
  }
  .guide{
	  width: 95%;
	  margin:auto;
	  margin-top: 10px;
	  border: 1px solid gray;
	  border-radius: 5px;
  }
  .guide h4{
	  display: flex;
	  justify-content: space-between;
	  font-size: 14px;
	  margin-left: 10px;
	  margin-top: 10px;
	  margin-right: 10px;
  }
  .box{
	  height: 170rpx;
	  display: flex;
	  align-items: center;
	  justify-content: space-around;
	  margin-top: 15px;
  }
  .box p{
	  width: 150rpx;
	  height:150rpx;
	  border-radius: 50%;
	  text-align: center;
	  line-height: 150rpx;
  }
  .guide h5{
	  display: flex;
	  justify-content: space-between;
	  padding-right: 10px;
	  border-top: 1px solid gray;
  	  font-size: 14px;
  	  margin-top: 10px;
	  padding-left: 10px;
	  margin-bottom: 10px;
	  padding-top: 10px;
  }
</style>
